<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邀请好友 - 奢享时光</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-gradient: linear-gradient(135deg, #7F00FF, #E100FF);
      --secondary-gradient: linear-gradient(135deg, #00F5A0, #00D9F5);
      --primary-color: #7F00FF;
      --secondary-color: #00F5A0;
      --accent-color: #FFE600;
      --dark-bg: #2D1B69;
      --light-bg: #6B3FA0;
      --text-light: #FFFFFF;
      --text-secondary: #E0D5FF;
      --card-bg: rgba(255, 255, 255, 0.1);
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      --border-radius: 16px;
      --border: 1px solid rgba(255, 255, 255, 0.18);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Noto Sans SC', 'Poppins', sans-serif;
      background: var(--dark-bg);
      color: var(--text-light);
      font-size: 14px;
      line-height: 1.5;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      outline: none;
    }

    .app-container {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      background: linear-gradient(180deg, var(--dark-bg), var(--light-bg));
      position: relative;
      overflow: hidden;
      padding-bottom: 70px;
    }

    /* 背景装饰 */
    .bg-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .bg-circle {
      position: absolute;
      border-radius: 50%;
    }

    .bg-circle:nth-child(1) {
      width: 300px;
      height: 300px;
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(225, 0, 255, 0.2), rgba(225, 0, 255, 0));
    }

    .bg-circle:nth-child(2) {
      width: 250px;
      height: 250px;
      bottom: 10%;
      left: -100px;
      background: radial-gradient(circle, rgba(0, 245, 160, 0.15), rgba(0, 245, 160, 0));
    }

    /* 顶部导航 */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(45, 27, 105, 0.8);
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border);
    }

    .back-button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .page-title {
      font-size: 18px;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      gap: 15px;
    }

    .header-actions i {
      font-size: 18px;
      color: var(--text-light);
      opacity: 0.9;
    }

    /* 内容区域 */
    .content {
      position: relative;
      z-index: 1;
      padding: 20px;
    }

    /* 邀请卡片 */
    .invite-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: var(--border);
      border-radius: var(--border-radius);
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: var(--shadow);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .invite-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
      position: relative;
    }

    .invite-desc {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 20px;
      position: relative;
    }

    .invite-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url('https://via.placeholder.com/400x200') no-repeat center center;
      background-size: cover;
      opacity: 0.1;
      z-index: 0;
    }

    /* 邀请奖励 */
    .rewards-section {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: var(--border);
      border-radius: var(--border-radius);
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: var(--shadow);
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title i {
      color: var(--accent-color);
    }

    /* 奖励卡片 */
    .rewards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }

    .reward-card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 15px 10px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .reward-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.1);
    }

    .reward-icon {
      font-size: 24px;
      color: var(--accent-color);
      margin-bottom: 10px;
    }

    .reward-value {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .reward-label {
      font-size: 12px;
      color: var(--text-secondary);
    }

    /* 邀请链接 */
    .invite-link-box {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 100px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .invite-link {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      margin-right: 10px;
    }

    .copy-btn {
      background: var(--primary-gradient);
      color: var(--text-light);
      border-radius: 100px;
      padding: 8px 15px;
      font-size: 12px;
      font-weight: 500;
      flex-shrink: 0;
    }

    /* 分享按钮 */
    .share-buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-top: 25px;
    }

    .share-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .share-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--text-light);
    }

    .share-icon.wechat {
      background: #07C160;
    }

    .share-icon.qq {
      background: #12B7F5;
    }

    .share-icon.weibo {
      background: #E6162D;
    }

    .share-icon.more {
      background: #808080;
    }

    .share-label {
      font-size: 12px;
      color: var(--text-secondary);
    }

    /* 海报 */
    .poster-container {
      text-align: center;
      margin: 30px 0;
    }

    .poster-preview {
      width: 70%;
      aspect-ratio: 9/16;
      margin: 0 auto 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .poster-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 按钮 */
    .primary-button {
      background: var(--primary-gradient);
      padding: 12px 30px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(127, 0, 255, 0.3);
    }

    .primary-button:active {
      transform: scale(0.97);
    }

    .secondary-button {
      background: rgba(255, 255, 255, 0.1);
      padding: 12px 30px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
    }

    .secondary-button:active {
      background: rgba(255, 255, 255, 0.15);
    }

    .button-group {
      display: flex;
      gap: 15px;
      justify-content: center;
    }

    /* 邀请记录 */
    .record-section {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: var(--border);
      border-radius: var(--border-radius);
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: var(--shadow);
    }

    .record-item {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .record-item:last-child {
      border-bottom: none;
    }

    .record-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .record-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .record-info {
      flex: 1;
    }

    .record-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .record-date {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .record-reward {
      font-size: 14px;
      color: var(--accent-color);
      font-weight: 600;
    }

    .empty-record {
      text-align: center;
      padding: 30px 0;
      color: var(--text-secondary);
    }

    .empty-icon {
      font-size: 40px;
      margin-bottom: 15px;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 14px;
    }

    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 480px;
      margin: 0 auto;
      background: rgba(45, 27, 105, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: var(--border);
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      z-index: 100;
    }

    .nav-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      color: var(--text-secondary);
      font-size: 12px;
      padding: 5px 0;
      flex: 1;
      transition: all 0.3s ease;
    }

    .nav-button i {
      font-size: 18px;
      margin-bottom: 2px;
    }

    .nav-button.active {
      color: var(--accent-color);
    }

    /* 标签页 */
    .tabs {
      display: flex;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.05);
      padding: 5px;
      margin-bottom: 20px;
    }

    .tab {
      flex: 1;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      border-radius: 100px;
      transition: all 0.3s ease;
    }

    .tab.active {
      background: var(--primary-gradient);
      color: var(--text-light);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle"></div>
      <div class="bg-circle"></div>
    </div>

    <!-- 顶部导航 -->
    <header class="header">
      <a href="profile.html" class="back-button">
        <i class="fas fa-arrow-left"></i>
      </a>
      <div class="page-title">邀请好友</div>
      <div class="header-actions">
        <i class="fas fa-question-circle"></i>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="content">
      <!-- 邀请卡片 -->
      <section class="invite-card">
        <div class="invite-bg"></div>
        <div class="invite-title">邀请好友立赚600元</div>
        <div class="invite-desc">好友注册即得50元，首次购买再得100元<br>邀请越多奖励越多，最高可享20%股权分红</div>
        
        <!-- 邀请链接 -->
        <div class="invite-link-box">
          <div class="invite-link">https://share.luxurytime.com/invite?code=ABC123XYZ</div>
          <div class="copy-btn" id="copy-link-btn">复制链接</div>
        </div>
        
        <!-- 分享按钮 -->
        <div class="share-buttons">
          <div class="share-button">
            <div class="share-icon wechat">
              <i class="fab fa-weixin"></i>
            </div>
            <div class="share-label">微信</div>
          </div>
          <div class="share-button">
            <div class="share-icon qq">
              <i class="fab fa-qq"></i>
            </div>
            <div class="share-label">QQ</div>
          </div>
          <div class="share-button">
            <div class="share-icon weibo">
              <i class="fab fa-weibo"></i>
            </div>
            <div class="share-label">微博</div>
          </div>
          <div class="share-button">
            <div class="share-icon more">
              <i class="fas fa-ellipsis-h"></i>
            </div>
            <div class="share-label">更多</div>
          </div>
        </div>
      </section>

      <!-- 标签页 -->
      <div class="tabs">
        <div class="tab active" data-tab="poster">邀请海报</div>
        <div class="tab" data-tab="rewards">奖励说明</div>
        <div class="tab" data-tab="records">邀请记录</div>
      </div>

      <!-- 海报内容 -->
      <div class="tab-content active" id="poster-tab">
        <div class="poster-container">
          <div class="poster-preview">
            <img src="https://via.placeholder.com/270x480" class="poster-image" alt="邀请海报">
          </div>
          <div class="button-group">
            <div class="secondary-button" id="refresh-poster-btn">
              <i class="fas fa-sync-alt"></i>
              <span>换一张</span>
            </div>
            <div class="primary-button" id="save-poster-btn">
              <i class="fas fa-download"></i>
              <span>保存海报</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 奖励说明内容 -->
      <div class="tab-content" id="rewards-tab">
        <section class="rewards-section">
          <div class="section-title">
            <i class="fas fa-gift"></i>
            <span>奖励政策</span>
          </div>
          
          <div class="rewards-grid">
            <div class="reward-card">
              <div class="reward-icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <div class="reward-value">50元</div>
              <div class="reward-label">新人注册奖励</div>
            </div>
            <div class="reward-card">
              <div class="reward-icon">
                <i class="fas fa-shopping-bag"></i>
              </div>
              <div class="reward-value">100元</div>
              <div class="reward-label">首次购买奖励</div>
            </div>
            <div class="reward-card">
              <div class="reward-icon">
                <i class="fas fa-star"></i>
              </div>
              <div class="reward-value">10颗</div>
              <div class="reward-label">幸运星奖励</div>
            </div>
          </div>
          
          <div class="section-title">
            <i class="fas fa-chart-line"></i>
            <span>股权计划</span>
          </div>
          
          <div style="background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 12px; margin-bottom: 20px;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
              <div>邀请<span style="color: var(--accent-color); font-weight: 600;">10</span>人</div>
              <div>获得<span style="color: var(--accent-color); font-weight: 600;">1%</span>股权</div>
            </div>
            <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
              <div style="height: 100%; width: 30%; background: var(--primary-gradient);"></div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: var(--text-secondary);">
              <div>已邀请: 3人</div>
              <div>目标: 10人</div>
            </div>
          </div>
          
          <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.6;">
            <p>1. 每成功邀请一位好友注册，您将获得50元奖励金</p>
            <p>2. 好友首次购买商品后，您将额外获得100元奖励金和10颗幸运星</p>
            <p>3. 成功邀请10位好友，您将获得平台1%的股权分红</p>
            <p>4. 邀请人数越多，股权比例越高，最高可获得20%股权</p>
            <p>5. 股权分红将按月发放，详情可查看股权页面</p>
          </div>
        </section>
      </div>

      <!-- 邀请记录内容 -->
      <div class="tab-content" id="records-tab">
        <section class="record-section">
          <div class="section-title">
            <i class="fas fa-history"></i>
            <span>邀请记录</span>
          </div>
          
          <div class="record-item">
            <div class="record-avatar">
              <img src="https://via.placeholder.com/100" alt="用户头像">
            </div>
            <div class="record-info">
              <div class="record-name">李**</div>
              <div class="record-date">2024-06-10 注册</div>
            </div>
            <div class="record-reward">+50元</div>
          </div>
          
          <div class="record-item">
            <div class="record-avatar">
              <img src="https://via.placeholder.com/100" alt="用户头像">
            </div>
            <div class="record-info">
              <div class="record-name">王**</div>
              <div class="record-date">2024-06-08 首次购买</div>
            </div>
            <div class="record-reward">+150元</div>
          </div>
          
          <div class="record-item">
            <div class="record-avatar">
              <img src="https://via.placeholder.com/100" alt="用户头像">
            </div>
            <div class="record-info">
              <div class="record-name">张**</div>
              <div class="record-date">2024-06-05 注册</div>
            </div>
            <div class="record-reward">+50元</div>
          </div>
          
          <!-- 当没有记录时显示 -->
          <!-- 
          <div class="empty-record">
            <div class="empty-icon">
              <i class="fas fa-user-friends"></i>
            </div>
            <div class="empty-text">暂无邀请记录，快去邀请好友吧</div>
          </div>
          -->
        </section>
      </div>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <a href="index.html" class="nav-button">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </a>
      <a href="groupbuy.html" class="nav-button">
        <i class="fas fa-users"></i>
        <span>拼团</span>
      </a>
      <a href="shares.html" class="nav-button">
        <i class="fas fa-chart-line"></i>
        <span>股权</span>
      </a>
      <a href="profile.html" class="nav-button active">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 复制链接功能
      const copyLinkBtn = document.getElementById('copy-link-btn');
      const inviteLink = document.querySelector('.invite-link').textContent;
      
      copyLinkBtn.addEventListener('click', function() {
        // 创建临时输入框
        const tempInput = document.createElement('input');
        tempInput.value = inviteLink;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        
        // 显示复制成功
        this.textContent = '已复制';
        setTimeout(() => {
          this.textContent = '复制链接';
        }, 2000);
      });
      
      // 标签页切换
      const tabs = document.querySelectorAll('.tab');
      const tabContents = document.querySelectorAll('.tab-content');
      
      tabs.forEach(tab => {
        tab.addEventListener('click', function() {
          const tabId = this.getAttribute('data-tab');
          
          // 更新标签状态
          tabs.forEach(t => t.classList.remove('active'));
          this.classList.add('active');
          
          // 更新内容显示
          tabContents.forEach(content => content.classList.remove('active'));
          document.getElementById(`${tabId}-tab`).classList.add('active');
        });
      });
      
      // 保存海报功能
      const savePosterBtn = document.getElementById('save-poster-btn');
      
      savePosterBtn.addEventListener('click', function() {
        // 模拟保存成功
        const originalText = this.innerHTML;
        this.innerHTML = '<i class="fas fa-check"></i><span>已保存</span>';
        
        setTimeout(() => {
          this.innerHTML = originalText;
        }, 2000);
      });
      
      // 刷新海报功能
      const refreshPosterBtn = document.getElementById('refresh-poster-btn');
      const posterImage = document.querySelector('.poster-image');
      
      refreshPosterBtn.addEventListener('click', function() {
        // 添加加载效果
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>加载中</span>';
        
        // 模拟加载新海报
        setTimeout(() => {
          // 随机参数确保获取新图片
          posterImage.src = `https://via.placeholder.com/270x480?${Math.random()}`;
          
          // 恢复按钮状态
          this.innerHTML = '<i class="fas fa-sync-alt"></i><span>换一张</span>';
        }, 1000);
      });
      
      // 分享按钮功能
      const shareButtons = document.querySelectorAll('.share-button');
      
      shareButtons.forEach(button => {
        button.addEventListener('click', function() {
          // 获取分享类型
          const shareType = this.querySelector('.share-label').textContent;
          
          // 模拟分享功能
          alert(`分享到${shareType}功能即将上线，敬请期待！`);
        });
      });
      
      // 页面加载动画
      const sections = document.querySelectorAll('section');
      sections.forEach((section, index) => {
        section.style.opacity = '0';
        section.style.transform = 'translateY(20px)';
        section.style.transition = `opacity 0.5s ease, transform 0.5s ease`;
        
        setTimeout(() => {
          section.style.opacity = '1';
          section.style.transform = 'translateY(0)';
        }, 100 + (index * 150));
      });
    });
  </script>
</body>
</html> 